<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教材详情页面</title>
    <link href="../assets/css/tailwind.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <script src="../assets/js/chart.umd.min.js"></script>
    
    <!-- 
    ============================================
    ⚠️ 原始配置 - 已合并到公共配置 ⚠️
    ============================================
    此配置已合并到公共配置文件 tailwind.config.js 中
    保留此注释作为配置历史记录和参考
    ============================================
    -->
    <!--
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        success: '#10b981',
                        danger: '#ef4444',
                        neutral: '#f1f5f9'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    -->
    
    <!-- 
    ============================================
    ⚠️ 原始工具类 - 已合并到公共配置 ⚠️
    ============================================
    此工具类已合并到公共配置文件 src/input.css 中
    保留此注释作为配置历史记录和参考
    ============================================
    -->
    <!--
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-md hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all;
            }
            .btn-secondary {
                @apply bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 transition-all;
            }
        }
    </style>
    -->
</head>

<body class="bg-gray-50 font-sans text-gray-800">
    <div class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
            <div class="container mx-auto px-4 py-3 flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                    <h1 class="text-xl font-bold text-primary flex items-center">
                        <i class="fa fa-book mr-2"></i>
                        <span>睿途教育</span>
                    </h1>
                </div>

                <div class="hidden md:flex items-center space-x-6">
                    <!-- 控制面板 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-tachometer mr-1"></i> 控制面板
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-dashboard mr-2"></i> 仪表盘
                                </a>
                                <a href="dashboard/data-overview.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 数据概览
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tasks mr-2"></i> 任务管理
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 教材管理（当前选中） -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 font-medium border-b-2 border-primary pb-1 flex items-center">
                            <i class="fa fa-book mr-1"></i> 教材管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-list mr-2"></i> 版本管理
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-sitemap mr-2"></i> 章节管理
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-lightbulb-o mr-2"></i> 知识点管理
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-primary bg-primary/10 font-medium">
                                    <i class="fa fa-exchange mr-2"></i> 版本对比
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 题库管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-database mr-1"></i> 题库管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-question-circle mr-2"></i> 题目管理
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tags mr-2"></i> 标签管理
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-filter mr-2"></i> 筛选规则
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-upload mr-2"></i> 批量导入
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 组卷系统 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-files-o mr-1"></i> 组卷系统
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-magic mr-2"></i> 智能组卷
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-edit mr-2"></i> 手动组卷
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-copy mr-2"></i> 试卷模板
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-history mr-2"></i> 历史试卷
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 数据分析 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-bar-chart mr-1"></i> 数据分析
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-pie mr-2"></i> 学习分析
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-bar mr-2"></i> 成绩统计
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 趋势分析
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-file-text mr-2"></i> 报告生成
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 系统设置 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-cog mr-1"></i> 系统设置
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-users mr-2"></i> 用户管理
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-shield mr-2"></i> 权限设置
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-database mr-2"></i> 数据备份
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-cogs mr-2"></i> 系统配置
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索教材、章节或知识点..."
                            class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>

                    <div class="relative">
                        <button class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-bell text-xl"></i>
                            <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                        </button>
                    </div>

                    <div class="flex items-center space-x-2 cursor-pointer group">
                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像"
                            class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                        <span class="hidden md:inline font-medium">张老师</span>
                        <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主内容区：优化的左右结构 -->
        <main class="flex-1 container mx-auto px-4 py-8">
            <!-- 面包屑导航 -->
            <div class="text-sm text-gray-500 mb-6">
                <a href="#" class="hover:text-primary">首页</a> 
                <i class="fa fa-angle-right mx-2 text-gray-400 text-xs"></i>
                <a href="#" class="hover:text-primary">教材管理</a>
                <i class="fa fa-angle-right mx-2 text-gray-400 text-xs"></i>
                <span class="text-gray-700">高中数学必修一</span>
            </div>
            
            <div class="flex flex-col lg:flex-row gap-8">
                <!-- 左侧主栏（核心内容区）：优化为70%宽度 -->
                <div class="w-full lg:w-[70%] space-y-6">
                    <!-- 1. 教材核心信息（封面+基本信息） -->
                    <div class="bg-white rounded-xl shadow-sm p-6 flex flex-col sm:flex-row gap-6 card-hover">
                        <img src="https://picsum.photos/id/24/180/240" alt="教材封面" class="w-40 h-52 object-cover rounded-lg shadow-sm border-2 border-gray-100 self-center sm:self-start">
                        <div class="flex-1 space-y-4">
                            <div class="flex flex-wrap items-center gap-4">
                                <h2 class="text-2xl md:text-3xl font-bold text-gray-800">高中数学必修一</h2>
                                <span class="px-3 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">数学</span>
                                <span class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-full">高中一年级</span>
                                <span class="px-3 py-1 text-xs bg-success text-white rounded-full">已发布</span>
                            </div>
                            <div class="flex flex-wrap gap-6 text-gray-500 text-sm">
                                <span><i class="fa fa-user mr-1"></i>王教授</span>
                                <span><i class="fa fa-calendar mr-1"></i>2025-03-15</span>
                                <span><i class="fa fa-eye mr-1"></i>1284 次浏览</span>
                                <span><i class="fa fa-download mr-1"></i>356 次下载</span>
                            </div>
                            <div class="flex flex-wrap gap-3 items-center pt-2">
                                <span class="text-gray-600 text-sm font-medium">教材版本：</span>
                                <button class="px-3 py-1.5 rounded bg-primary text-white font-medium chart-btn">人教A版</button>
                                <button class="px-3 py-1.5 rounded bg-gray-100 text-gray-700 hover:bg-primary/10 hover:text-primary font-medium chart-btn transition-colors">北师大版</button>
                                <button class="px-3 py-1.5 rounded bg-gray-100 text-gray-700 hover:bg-primary/10 hover:text-primary font-medium chart-btn transition-colors">苏教版</button>
                                <button class="px-3 py-1.5 rounded bg-gray-100 text-gray-700 hover:bg-primary/10 hover:text-primary font-medium chart-btn transition-colors">浙教版</button>
                            </div>
                            <div class="text-sm text-gray-500">
                                当前版本：<span class="font-bold text-primary">人教A版</span>，适用地区最广，内容权威，配套资源丰富。
                            </div>
                        </div>
                    </div>

                    <!-- 2. 教材简介 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                        <h3 class="font-semibold text-gray-800 mb-4 flex items-center text-lg">
                            <i class="fa fa-info-circle text-primary mr-2"></i>教材简介
                        </h3>
                        <p class="text-gray-600 leading-relaxed">
                            本书涵盖高中数学必修一的全部内容，包括集合与函数概念、基本初等函数等核心章节。内容编排遵循"从具体到抽象"的认知规律，通过生活案例引入数学概念，配套大量例题与课后练习，帮助学生建立数学思维框架。
                            <br><br>
                            本版本在原版基础上新增"数学建模"拓展模块，结合实际问题培养应用能力，适合高中一年级学生同步学习使用。教材编写团队由具有多年一线教学经验的特级教师组成，确保内容的实用性和权威性。
                        </p>
                    </div>

                    <!-- 3. 章节内容（手风琴） -->
                    <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                        <h3 class="font-semibold text-gray-800 mb-4 flex items-center text-lg">
                            <i class="fa fa-list-ol text-primary mr-2"></i>章节内容
                        </h3>
                        <div id="chapterAccordion" class="divide-y divide-gray-200">
                            <div class="py-3">
                                <button class="w-full flex justify-between items-center text-left text-primary font-medium text-base focus:outline-none" onclick="toggleChapter(1)">
                                    第一章 集合与函数概念
                                    <i class="fa fa-chevron-down ml-2 transition-transform" id="chevron-1"></i>
                                </button>
                                <div class="pl-4 mt-3 text-gray-600 hidden" id="chapter-content-1">
                                    <ul class="list-disc pl-4 space-y-2">
                                        <li class="py-1">1.1 集合的含义与表示（包含自然数集、整数集等常用数集）</li>
                                        <li class="py-1">1.2 集合间的基本关系（子集、真子集、空集的概念）</li>
                                        <li class="py-1">1.3 集合的基本运算（交集、并集、补集的运算规则）</li>
                                        <li class="py-1">1.4 函数的概念与表示法（定义域、值域、解析式的三种表示形式）</li>
                                    </ul>
                                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between items-center">
                                        <span class="text-sm text-gray-500"><i class="fa fa-clock-o mr-1"></i> 建议学时：8课时</span>
                                        <a href="#" class="text-primary text-sm hover:underline"><i class="fa fa-eye mr-1"></i> 查看详情</a>
                                    </div>
                                </div>
                            </div>
                            <div class="py-3">
                                <button class="w-full flex justify-between items-center text-left text-primary font-medium text-base focus:outline-none" onclick="toggleChapter(2)">
                                    第二章 基本初等函数
                                    <i class="fa fa-chevron-down ml-2 transition-transform" id="chevron-2"></i>
                                </button>
                                <div class="pl-4 mt-3 text-gray-600 hidden" id="chapter-content-2">
                                    <ul class="list-disc pl-4 space-y-2">
                                        <li class="py-1">2.1 指数函数（指数幂的运算、指数函数的图像与性质）</li>
                                        <li class="py-1">2.2 对数函数（对数的概念、运算性质、对数函数的图像与性质）</li>
                                        <li class="py-1">2.3 幂函数（常见幂函数的图像特征与性质对比）</li>
                                        <li class="py-1">2.4 函数的单调性与奇偶性（判定方法与应用场景）</li>
                                    </ul>
                                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between items-center">
                                        <span class="text-sm text-gray-500"><i class="fa fa-clock-o mr-1"></i> 建议学时：12课时</span>
                                        <a href="#" class="text-primary text-sm hover:underline"><i class="fa fa-eye mr-1"></i> 查看详情</a>
                                    </div>
                                </div>
                            </div>
                            <div class="py-3">
                                <button class="w-full flex justify-between items-center text-left text-primary font-medium text-base focus:outline-none" onclick="toggleChapter(3)">
                                    第三章 函数的应用
                                    <i class="fa fa-chevron-down ml-2 transition-transform" id="chevron-3"></i>
                                </button>
                                <div class="pl-4 mt-3 text-gray-600 hidden" id="chapter-content-3">
                                    <ul class="list-disc pl-4 space-y-2">
                                        <li class="py-1">3.1 函数与方程（函数的零点、二分法求方程的近似解）</li>
                                        <li class="py-1">3.2 函数模型及其应用（几类不同增长的函数模型）</li>
                                        <li class="py-1">3.3 数学建模初步（实际问题的数学化方法与步骤）</li>
                                    </ul>
                                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between items-center">
                                        <span class="text-sm text-gray-500"><i class="fa fa-clock-o mr-1"></i> 建议学时：6课时</span>
                                        <a href="#" class="text-primary text-sm hover:underline"><i class="fa fa-eye mr-1"></i> 查看详情</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 4. 配套资源 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                        <h3 class="font-semibold text-gray-800 mb-4 flex items-center text-lg">
                            <i class="fa fa-file-text-o text-primary mr-2"></i>配套资源
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="flex items-center p-3 border border-gray-100 rounded-lg hover:border-primary/30 transition-colors">
                                <div class="w-10 h-10 rounded bg-blue-100 flex items-center justify-center text-primary mr-3">
                                    <i class="fa fa-file-pdf-o text-lg"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-gray-800">教师教学参考用书.pdf</h4>
                                    <div class="flex items-center text-xs text-gray-500 mt-1">
                                        <span><i class="fa fa-calendar mr-1"></i> 2025-03-15</span>
                                        <span class="mx-2">|</span>
                                        <span><i class="fa fa-download mr-1"></i> 248次</span>
                                    </div>
                                </div>
                                <button class="text-primary hover:text-primary/80 transition-colors">
                                    <i class="fa fa-download"></i>
                                </button>
                            </div>
                            <div class="flex items-center p-3 border border-gray-100 rounded-lg hover:border-primary/30 transition-colors">
                                <div class="w-10 h-10 rounded bg-green-100 flex items-center justify-center text-green-600 mr-3">
                                    <i class="fa fa-file-excel-o text-lg"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-gray-800">课后习题答案与解析.xlsx</h4>
                                    <div class="flex items-center text-xs text-gray-500 mt-1">
                                        <span><i class="fa fa-calendar mr-1"></i> 2025-03-16</span>
                                        <span class="mx-2">|</span>
                                        <span><i class="fa fa-download mr-1"></i> 312次</span>
                                    </div>
                                </div>
                                <button class="text-primary hover:text-primary/80 transition-colors">
                                    <i class="fa fa-download"></i>
                                </button>
                            </div>
                            <div class="flex items-center p-3 border border-gray-100 rounded-lg hover:border-primary/30 transition-colors">
                                <div class="w-10 h-10 rounded bg-orange-100 flex items-center justify-center text-orange-600 mr-3">
                                    <i class="fa fa-file-powerpoint-o text-lg"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-gray-800">课堂教学PPT课件.rar</h4>
                                    <div class="flex items-center text-xs text-gray-500 mt-1">
                                        <span><i class="fa fa-calendar mr-1"></i> 2025-03-18</span>
                                        <span class="mx-2">|</span>
                                        <span><i class="fa fa-download mr-1"></i> 356次</span>
                                    </div>
                                </div>
                                <button class="text-primary hover:text-primary/80 transition-colors">
                                    <i class="fa fa-download"></i>
                                </button>
                            </div>
                            <div class="flex items-center p-3 border border-gray-100 rounded-lg hover:border-primary/30 transition-colors">
                                <div class="w-10 h-10 rounded bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
                                    <i class="fa fa-file-video-o text-lg"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-gray-800">重难点讲解视频.mp4</h4>
                                    <div class="flex items-center text-xs text-gray-500 mt-1">
                                        <span><i class="fa fa-calendar mr-1"></i> 2025-03-20</span>
                                        <span class="mx-2">|</span>
                                        <span><i class="fa fa-download mr-1"></i> 189次</span>
                                    </div>
                                </div>
                                <button class="text-primary hover:text-primary/80 transition-colors">
                                    <i class="fa fa-download"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 5. 操作按钮 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 flex flex-wrap justify-between items-center gap-4">
                        <div class="flex items-center gap-3">
                            <button class="px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
                                <i class="fa fa-copy mr-1"></i>复制链接
                            </button>
                            <button class="px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
                                <i class="fa fa-download mr-1"></i>下载教材
                            </button>
                        </div>
                        <div class="flex items-center gap-3">
                            <button class="px-4 py-2 text-sm bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                <i class="fa fa-edit mr-1"></i>编辑教材
                            </button>
                            <button class="px-4 py-2 text-sm bg-danger text-white rounded-lg hover:bg-danger/90 transition-colors">
                                <i class="fa fa-trash mr-1"></i>删除教材
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 右侧副栏（辅助内容区）：优化为30%宽度 -->
                <div class="w-full lg:w-[30%] flex-shrink-0 space-y-6">
                    <!-- 1. 教材数据概览 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                        <h3 class="font-semibold text-gray-800 mb-5 flex items-center text-lg">
                            <i class="fa fa-bar-chart text-primary mr-2"></i>使用数据
                        </h3>
                        <div class="space-y-5">
                            <div class="h-48">
                                <canvas id="usageChart"></canvas>
                            </div>
                            <div class="grid grid-cols-2 gap-4 text-center">
                                <div class="p-3 bg-gray-50 rounded-lg">
                                    <div class="text-2xl font-bold text-primary">28</div>
                                    <div class="text-sm text-gray-500 mt-1">累计使用学校</div>
                                </div>
                                <div class="p-3 bg-gray-50 rounded-lg">
                                    <div class="text-2xl font-bold text-primary">1,254</div>
                                    <div class="text-sm text-gray-500 mt-1">资源下载量</div>
                                </div>
                                <div class="p-3 bg-gray-50 rounded-lg">
                                    <div class="text-2xl font-bold text-primary">4.8</div>
                                    <div class="text-sm text-gray-500 mt-1">平均评分</div>
                                </div>
                                <div class="p-3 bg-gray-50 rounded-lg">
                                    <div class="text-2xl font-bold text-primary">92%</div>
                                    <div class="text-sm text-gray-500 mt-1">教师满意度</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 2. 作者信息 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                        <h3 class="font-semibold text-gray-800 mb-4 flex items-center text-lg">
                            <i class="fa fa-user text-primary mr-2"></i>作者信息
                        </h3>
                        <div class="flex flex-col items-center">
                            <img src="https://picsum.photos/id/91/100/100" alt="王教授头像" class="w-20 h-20 rounded-full object-cover border-2 border-primary/20 mb-3">
                            <h4 class="font-bold text-gray-800">王教授</h4>
                            <p class="text-sm text-gray-500 mb-3">数学教育研究所 · 博士生导师</p>
                            <div class="text-center text-sm text-gray-600 mb-4 px-2">
                                从事高中数学教学与研究30余年，主编过10余本高中数学教材，拥有丰富的一线教学经验。
                            </div>
                            <button class="w-full py-2 text-sm text-primary border border-primary/30 rounded-lg hover:bg-primary/5 transition-colors">
                                查看更多作品
                            </button>
                        </div>
                    </div>

                    <!-- 3. 相关教材推荐 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                        <h3 class="font-semibold text-gray-800 mb-5 flex items-center text-lg">
                            <i class="fa fa-thumbs-up text-primary mr-2"></i>相关教材推荐
                        </h3>
                        <div class="space-y-5">
                            <div class="border border-gray-100 rounded-lg overflow-hidden hover:shadow-md transition-shadow p-3 flex gap-3">
                                <img src="https://picsum.photos/id/25/80/100" alt="高中数学必修二" class="w-20 h-28 object-cover rounded flex-shrink-0">
                                <div class="flex-1 min-w-0">
                                    <div class="flex justify-between items-start mb-1">
                                        <h4 class="font-semibold text-sm truncate">高中数学必修二</h4>
                                        <span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-800 rounded-full">数学</span>
                                    </div>
                                    <p class="text-xs text-gray-500 mb-2 line-clamp-2">承接必修一内容，包括立体几何、平面解析几何等核心知识，难度逐步提升。</p>
                                    <div class="flex items-center justify-between">
                                        <div class="text-xs text-gray-400">
                                            <i class="fa fa-user mr-1"></i>王教授
                                        </div>
                                        <button class="px-2 py-0.5 text-xs bg-primary text-white rounded hover:bg-primary/90 transition-colors">
                                            查看
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="border border-gray-100 rounded-lg overflow-hidden hover:shadow-md transition-shadow p-3 flex gap-3">
                                <img src="https://picsum.photos/id/26/80/100" alt="高中数学选修1-1" class="w-20 h-28 object-cover rounded flex-shrink-0">
                                <div class="flex-1 min-w-0">
                                    <div class="flex justify-between items-start mb-1">
                                        <h4 class="font-semibold text-sm truncate">高中数学选修1-1</h4>
                                        <span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-800 rounded-full">数学</span>
                                    </div>
                                    <p class="text-xs text-gray-500 mb-2 line-clamp-2">包含常用逻辑用语、圆锥曲线与方程、导数及其应用等内容。</p>
                                    <div class="flex items-center justify-between">
                                        <div class="text-xs text-gray-400">
                                            <i class="fa fa-user mr-1"></i>李教授
                                        </div>
                                        <button class="px-2 py-0.5 text-xs bg-primary text-white rounded hover:bg-primary/90 transition-colors">
                                            查看
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="border border-gray-100 rounded-lg overflow-hidden hover:shadow-md transition-shadow p-3 flex gap-3">
                                <img src="https://picsum.photos/id/27/80/100" alt="高中数学解题技巧" class="w-20 h-28 object-cover rounded flex-shrink-0">
                                <div class="flex-1 min-w-0">
                                    <div class="flex justify-between items-start mb-1">
                                        <h4 class="font-semibold text-sm truncate">高中数学解题技巧</h4>
                                        <span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-800 rounded-full">数学</span>
                                    </div>
                                    <p class="text-xs text-gray-500 mb-2 line-clamp-2">针对必修课程中的重点难点，提供实用解题方法与技巧总结。</p>
                                    <div class="flex items-center justify-between">
                                        <div class="text-xs text-gray-400">
                                            <i class="fa fa-user mr-1"></i>张教授
                                        </div>
                                        <button class="px-2 py-0.5 text-xs bg-primary text-white rounded hover:bg-primary/90 transition-colors">
                                            查看
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="w-full mt-5 py-2 text-sm text-primary border border-primary/30 rounded-lg hover:bg-primary/5 transition-colors">
                            查看更多推荐
                        </button>
                    </div>

                    <!-- 4. 教材评价 -->
                    <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                        <h3 class="font-semibold text-gray-800 mb-4 flex items-center text-lg">
                            <i class="fa fa-comments text-primary mr-2"></i>教师评价
                        </h3>
                        <div class="space-y-4 max-h-96 overflow-y-auto pr-2">
                            <div class="pb-4 border-b border-gray-100">
                                <div class="flex justify-between items-start mb-2">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/65/40/40" alt="用户头像" class="w-8 h-8 rounded-full mr-2">
                                        <div>
                                            <div class="font-medium text-sm">刘老师</div>
                                            <div class="text-xs text-gray-500">2025-04-10</div>
                                        </div>
                                    </div>
                                    <div class="text-yellow-400 text-xs">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600">内容编排合理，例题选择典型，非常适合高一新生打基础使用，配套的PPT课件质量很高。</p>
                            </div>
                            <div class="pb-4 border-b border-gray-100">
                                <div class="flex justify-between items-start mb-2">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/66/40/40" alt="用户头像" class="w-8 h-8 rounded-full mr-2">
                                        <div>
                                            <div class="font-medium text-sm">陈老师</div>
                                            <div class="text-xs text-gray-500">2025-04-05</div>
                                        </div>
                                    </div>
                                    <div class="text-yellow-400 text-xs">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600">新增的数学建模模块很实用，帮助学生将理论知识与实际问题结合，如果能增加更多练习题就更好了。</p>
                            </div>
                            <div>
                                <div class="flex justify-between items-start mb-2">
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/67/40/40" alt="用户头像" class="w-8 h-8 rounded-full mr-2">
                                        <div>
                                            <div class="font-medium text-sm">赵老师</div>
                                            <div class="text-xs text-gray-500">2025-03-28</div>
                                        </div>
                                    </div>
                                    <div class="text-yellow-400 text-xs">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600">王教授的教材一如既往地优秀，讲解清晰易懂，学生反馈很好，推荐同行使用。</p>
                            </div>
                        </div>
                        <button class="w-full mt-4 py-2 text-sm bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            查看全部评价
                        </button>
                    </div>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-white border-t border-gray-200 py-6 mt-12">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="text-center md:text-left mb-4 md:mb-0">
                        <p class="text-sm text-gray-500">© 2025 教材资源管理系统. 保留所有权利.</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-question-circle mr-1"></i> 帮助中心
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-file-text-o mr-1"></i> 使用条款
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-shield mr-1"></i> 隐私政策
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <script>
        // 章节手风琴展开/收起功能
        function toggleChapter(idx) {
            const content = document.getElementById('chapter-content-' + idx);
            const chevron = document.getElementById('chevron-' + idx);
            content.classList.toggle('hidden');
            chevron.classList.toggle('rotate-180');
        }
        
        // 初始化使用数据图表
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('usageChart').getContext('2d');
            const chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    datasets: [{
                        label: '月使用量',
                        data: [45, 68, 125, 189, 210, 245],
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
        });
    </script>
</body>

</html>